<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS动画效果</title>
        <style>
             a{
                display:block;
                width:50px;
                height:50px;
                position:fixed;
                top:50%;
                left:0;
                border:1px solid #ccc;
                text-decoration: none;
            }

            .dropload-load .loading{
                display: inline-block;
                height: 15px;
                width: 15px;
                border-radius: 100%;
                margin: 6px;
                border: 2px solid #666;
                border-bottom-color: transparent;
                vertical-align: middle;
                -webkit-animation: rotate 0.75s linear infinite;
                animation: rotate 0.75s linear infinite;
            }
            @-webkit-keyframes rotate {
                0% {-webkit-transform: rotate(0deg);}
                50% { -webkit-transform: rotate(180deg);}
                100% {-webkit-transform: rotate(360deg);}
            }
            @keyframes rotate {
                0% {transform: rotate(0deg); }
                50% {transform: rotate(180deg);}
                100% {transform: rotate(360deg);}
            }          
        </style>
    </head>
    <body>
            <div class="dropload-load"><span class="loading"></span>加载中...</div>


        <a href="index.html">返回</a>
    </body>
</html>